<template>
    <div class="iot">
        <div class="header">
            <div class="title">
                温湿度监测
            </div>
        </div>
        <div class="imgslider"> 
            <el-carousel height="150px">
                <el-carousel-item v-for="(item,ind) in dicts.topimgs" :key="ind">
                    <img :src="item.img" alt="" class="topimg">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="mainBody">
            <div 
                v-for = "(cate,cateInd) in dicts.cates" :key="cateInd"
                class="sec"            
            >
                <div class="secheader">
                    <div class="title">{{cate.cateName}}</div>
                </div>
                <div class="secbody"> 
                    <el-row :gutter="15">
                        <el-col :span="12" v-for="(dev,devInd) in cate.devices" :key="devInd">
                            <div class="pan" @click="navDetail(dev.deviceId)">
                                <div class="panH">
                                    <div class="title">{{dev.deviceName}}</div>
                                </div>
                                <div class="panB">
                                    <div class="item">
                                        <i class="fa fa-sort-amount-asc"></i>
                                        <div class="data">
                                            <span class="value">{{devTemperature(dev)}}</span>
                                            <span class="unit">℃</span>
                                        </div>
                                    </div> 
                                    <div class="item">
                                        <i class="fa fa-tint"></i>
                                        <div class="data">
                                            <span class="value">{{devHumidity(dev)}}</span>
                                            <span class="unit">%</span>
                                        </div>
                                    </div> 
                                </div>
                            </div>
                        </el-col> 
                    </el-row>
                </div>
            </div>

        </div> 
        
    </div>
</template>

<script> 
    import {admin} from '../../admin';
    import {moApp} from './moapp.js';
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return{ 
                pageState:{
                    navIndex:0
                },
                pageStateKey : "zn_admin_mo_main",
                dicts:{
                    topimgs:[
                        {index:0 , img:require("../../../res/imgs/topimgs/p0.png")},
                        {index:1 , img:require("../../../res/imgs/topimgs/p1.png")},
                        {index:2 , img:require("../../../res/imgs/topimgs/p2.png")},
                        {index:3 , img:require("../../../res/imgs/topimgs/p3.png")},
                    ],
                    cates:[],
                    devices:[],
                    variants:[]
                }
            }

        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = admin.api.getSessionObj( me.pageStateKey , me.pageState); 
                        moApp.getIndexDict( moApp.sysCode).then(_res=>{
                            me.dicts.cates = _res.cates ;
                            me.dicts.devices = _res.devices;
                            me.dicts.variants = _res.variants; 
                            console.log(me.dicts)
                            su();
                        });
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            refresh(){
                var me = this;
                try {
                    var dictDevices ={};
                    me.dicts.devices.forEach( d=>{
                        dictDevices[d.deviceId] = d;
                    })
                    var dictVars ={};
                    me.dicts.variants.forEach( v=>{
                        dictVars[v.varId] = v;
                    })
                    var idList = me.dicts.variants.map( v=>{ 
                        return v.varId;
                    })
                    moApp.getVarRealValues(idList).then(res=>{
                        console.log(res)
                        if( res.status==1 ){
                            me.dicts.variants.forEach(v=>{
                                var varId = v.varId;
                                var value = res.result[varId]
                                if( value && value!=null){
                                    v.value = value;
                                }
                                else{
                                    v.value={}
                                }
                            })

                            Object.keys(res.result).forEach( varId=>{
                                var variant = dictVars[varId];
                                var device = dictDevices[variant.deviceId]
                                var varCode = variant.varCode;
                                device.values[varCode] = res.result[varId]
                            })
                            console.log( me.dicts)
                        }
                    })
                } catch (error) {
                    console.log(error)
                }
            },
            navDetail(deviceId){
                var me = this;
                try { 
                    admin.api.setSessionObj( me.pageStateKey , me.pageState); 
                    var url = "/mo/detail";
                    var device = me.dicts.devices.find( d=>{
                        return d.deviceId == deviceId;
                    })
                    if( device && device!=null){
                        me.$router.push({
                            path: url,
                            query:{
                                deviceId: deviceId ,
                                tId: device.vars.temperature.varId ,
                                hId: device.vars.humidity.varId , 
                            }
                        })

                    }
                } catch (error) {
                    console.log(error)
                }
            },

        }, 
        computed:{
            devTemperature(){
                return (device)=>{
                    var res = "";
                    try {
                        if( device && device.values && device.values.temperature){
                            var resStr = parseFloat(device.values.temperature.v) ; 
                            res =  resStr.toFixed(1);                            
                        }
                        res = (res==NaN || res=='NaN')?"--":res
                    } catch (error) {
                        console.log(error)
                    }
                    return res;
                }
            },
            devHumidity(){
                return (device)=>{
                    var res = "";
                    try {
                        if( device && device.values && device.values.humidity){
                            var resStr = parseFloat(device.values.humidity.v) ; 
                            res = resStr.toFixed(1);
                        }
                        res = (res==NaN || res=='NaN')?"--":res
                    } catch (error) {
                        console.log(error)
                    }
                    return res;
                }
            }
        }
        
    } 
</script>

<style lang="less" scoped>
    .iot{
        padding: 15px;
        .header{
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            .title{
                color: #878b94;
                font-weight: bold;
            } 
        }
        .imgslider{ 
            margin-bottom: 15px;
            img.topimg{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px;
                
            }

        }

        .sec{
            margin-bottom: 15px;
            .secheader{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
                .title{
                    font-weight: bold;
                    padding-left:10px;
                    border-left: 3px solid #0077fe;
                }
            }
            .secbody{

                .pan{
                    background-color: #fff;
                    box-shadow: 0 0 2px 0 #dcdfe6;
                    margin-bottom: 15px;
                    border-radius: 5px;
                    padding: 10px;
                    box-sizing: border-box;
                    background-image: url('https://bce.bdstatic.com/p3m/common-service/uploads/imgcardbggrey_8680511.png');
                    background-size: 100%;
                    background-position : right bottom;
                    background-repeat: no-repeat;
                    background-color: #f2f6fa;
                    height: 116px;;
                    .panH{
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 20px;
                        .title{
                            color: #878b94;                            
                        }

                    }
                    .panB{
                        .item{
                            display: flex;
                            align-items: center;
                            margin-bottom: 10px;
                            
                            i{
                                font-size: 0.85em;
                                color: #777;
                            }
                            .value{
                                font-weight: bold;
                                padding-left: 5px;
                                font-size: 1.1em;
                            }
                            .unit{
                                font-size:0.85em;
                                padding-left: 5px;
                                color: #777;
                            }
                        }
                    }
                }
                .pan:active{
                    box-shadow: 0 0 5px 0 #999;
                }
            }
        }
    }
</style>